<template>
  <div>
    <div class="page-title">{{pageTitle}}</div>
    <slot name="namebottom"></slot>
    <!-- tag -->
    <slot name="tabs"></slot>
    <div class="btn-box">
      <div class="btnlist-box flex-c">
        <div class="mr10" v-for="item in btnList" :key="item.id+item.name">
            <div v-if="item.type==='more'">
              <el-dropdown trigger="click">
                <el-button size="small">{{item.name}}</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item2 in item.btnList" :key="item2.id+item2.name" @click.native="item2.handle">{{ item2.name }}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-button v-else size="small" @click="item.handle">{{item.name}}</el-button>
        </div>
      </div>
      <div class="add-btnbase">
        <div class="add-btn">
          <el-button class="add-btn-item" v-for="item in addBtnList" :key="item.id+item.name" @click="item.handle" type="primary">{{item.name}}</el-button>
        </div>
      </div>
    </div>
    <psearch :allData="allColumn" :selectedData="tableColumn" @search="handleSearch" @setTable="val=>$emit('setColumn',val)">
    </psearch>
    <plist ref="pList" :tableData="newTableData" :tableColumn="tableColumn" :hasIndex="false" :hasSelect="true">
    </plist>
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import plist from "@/components/publicList";
  import psearch from '@/components/publicSearch'

  export default {
    props:['pageTitle','btnList','addBtnList','tableData','tableColumn','allColumn'],
    data() {
      return {
        validData:[],
        listParams:{
          page:1,
          limit:10,
          searchData:''
        },
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        }
      }
    },
    computed:{
      newTableData(){
        let allData = JSON.parse(JSON.stringify(this.validData))
        let page = this.pageparm.currentPage
        let size = this.pageparm.pageSize
        let data = allData.splice((page-1)*size,size)
        return data
      }
    },
    watch:{
      tableData(val){
        this.validData = JSON.parse(JSON.stringify(val))
      },
      validData(val){
        this.pageparm.total = val.length
      }
    },
    components: {
      Pagination,
      plist,
      psearch,
    },
    methods: {
      callFather(parm) {
        this.pageparm.currentPage = parm.currentPage
        this.pageparm.pageSize = parm.pageSize

        // console.log('@@@@@@@@@@@分页变化查询')
        // this.listParams.page = parm.currentPage
        // this.listParams.limit = parm.pageSize
        // this.$emit('search',JSON.parse(JSON.stringify(this.listParams)))
      },
      handleSearch(val) {

        this.listParams.searchData = val
        this.pageparm.currentPage = 1
        this.validData = this.tableData.filter(item=>{
          return item.name.includes(val||'')
        })
        // this.$emit('search',JSON.parse(JSON.stringify(this.listParams)))
      },
      getSelectedData() {
        return this.$refs.pList.multipleSelection
      },
    }
  }
</script>

<style scoped lang="less">
// 页面头部样式
  .page-title {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
  }

.btn-box{
  height: 32px;
  margin-top:20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .add-btnbase{
    position:relative;
    .add-btn{
      display: flex;
      position: absolute;
      right: 0;
      top: -55px;
      .add-btn-item{
        min-width: 135px;
      }
    }
  }
}
.btnlist-box{
  /deep/.el-button{
    font-size: 14px;
    height: 32px;
    padding: 0 15px;
  }
}
</style>
